<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单管理</title>
<link rel="stylesheet" th:href="@{/css/goods_trade/goods_trade.css}">
<style type="text/css">
	input[type=file] {
		display: none;
	}
</style>
</head>
<body>
	<div id="inorderPageDiv">
	
		<div>
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>订单管理</el-breadcrumb-item>
			  <el-breadcrumb-item>出库管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br/>
		
		<!-- content start -->
			<el-form :inline="true" :model="orderVo" class="demo-form-inline">
			<el-form-item label="源仓库地址">
			    <el-select v-model="orderVo.fromWhereHouse" placeholder="源仓库地址" @change="selectQueryPositionByHouse">
			      <el-option v-for="ho in house" :label="ho.houseName" :value="ho.id" :key="ho.id"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="源库位地址">
			    <el-select v-model="orderVo.fromWherePosition" placeholder="源库位地址">
			      <el-option v-for="po in position" :label="po.positionName" :value="po.id" :key="po.id"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="出库单号">
			       <el-input v-model="orderVo.outorderNum" placeholder="出库单号"></el-input>
			  </el-form-item>
			  <el-form-item label="商品名称">
			       <el-input v-model="orderVo.goodsName" placeholder="商品名称"></el-input>
			  </el-form-item>
			  <el-form-item label="商品编号">
			      <el-input v-model="orderVo.sku" placeholder="商品编号"></el-input>
			  </el-form-item>
			  <br>
			  <div class="submitBtn">
			    <el-button type="primary" @click="onQueryForBtn" :loading="queryBtn">查询</el-button>
			    <el-button type="primary" @click="dialogFormVisible = true" >新建订单</el-button>
			    <el-dialog title="订单录入" :visible.sync="dialogFormVisible">
				  <el-form :model="createOutorderForm" ref="createOutorderForm" :rules="orderRules" :label-position="labelPosition" :label-width="formLabelWidth">
				  	 <el-form-item prop="toWhereHouse" label="选择仓库位置" >
					    <el-select v-model="createOutorderForm.toWhereHouse" placeholder="目的仓库地址" @change="selectOrderHouseForQuery" style="margin-left:-120px !important;">
					      <el-option v-for="ho in house" :label="ho.houseName" :value="ho.id" :key="ho.id"></el-option>
					    </el-select>
				    </el-form-item>
				    <el-form-item prop="toWherePosition" label="选择库位位置" >
				      <el-select v-model="createOutorderForm.toWherePosition" placeholder="目的库位地址" @change="selectOrderPositionForQuery" style="margin-left:-120px !important;">
					      <el-option v-for="po in position" :label="po.positionName" :value="po.id" :key="po.id"></el-option>
					    </el-select>
				    </el-form-item>
				    <el-form-item prop="toWhereLocation" label="选择货位位置"  placeholder="目的货位地址"  >
				      	<el-select v-model="createOutorderForm.toWhereLocation" placeholder="目的货位" @change="selectOrderLocationForQuery" style="margin-left:-120px !important;">
				      		<el-option v-for="lo in location" :label="lo.locationName" :value="lo.id" :key="lo.id"></el-option>
				    	</el-select>
				    </el-form-item>
				    
				    <el-form-item v-for="(goodsTrade, index) in createOutorderForm.goodsTrades" :label="'物资' + index" :key="goodsTrade.key" :prop="'goodsTrades.' + index + '.id'" :rules="{
					      required: true, message: '物资不能为空', trigger: 'blur'
					    }" label-width="80px">
					    <el-select v-model="goodsTrade.id" filterable placeholder="请选择">
						    <el-option
						      v-for="item in goods"
						      :key="item.id"
						      :label="item.goodsName"
						      :value="item.id">
						      <span style="float: left">{{ item.goodsName }}</span>
						      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.goodsPrice }}元</span>
						      <span style="float: right; color: #8492a6; font-size: 13px">/</span>
						      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.goodsUnit }}</span>
						    </el-option>
						 </el-select>
					    <el-input v-model.number="goodsTrade.goodsNum" type="number" placeholder="出库数量" :rules="{
					    	required: true, message: '物资数量不能为空', trigger: 'blur'
					    }" style="width:20%;"></el-input>
					    <el-button @click.prevent="removeDomain(goodsTrade)">删除</el-button>
					</el-form-item>
				    
				  </el-form>
				  
				  <div slot="footer" class="dialog-footer">
				  	<el-button @click="addDomain">新增物资</el-button>
				    <el-button @click="restDialogForm('createOutorderForm')">取 消</el-button>
				    <el-button type="primary" @click="submitFomr('createOutorderForm')">确 定</el-button>
				  </div>
				</el-dialog>
			  </div>
			</el-form>
		<!-- content end -->
			<el-tag style="width:100%;">详情表格</el-tag>
		<!-- table start -->
			<template>
			  <el-table
			    :data="outorderDetail"
			    style="width: 100%">
			    <el-table-column
			      label="出库单号"
			      prop="outorderNum">
			    </el-table-column>
			    <el-table-column
			      label="源目的地"
			      prop="fromWhereHouseName">
			    </el-table-column>
			    <el-table-column
			      label="源目的库位"
			      prop="fromWherePositionName">
			    </el-table-column>
			    <el-table-column
			      label="出库位置"
			      prop="toWhereArea">
			    </el-table-column>
			    <el-table-column
			      label="状态"
			      prop="status">
			    </el-table-column>
			    <el-table-column
			      label="创建时间"
			      prop="createDate">
			    </el-table-column>
			    <el-table-column
			      label="创建用户"
			      prop="creatorName">
			    </el-table-column>
			    <el-table-column
			      label="更新时间"
			      prop="updateDate">
			    </el-table-column>
			    <el-table-column
			      label="更新用户"
			      prop="updatorName">
			    </el-table-column>
			    
			    <el-table-column
				      fixed="right"
				      label="操作"
				      width="100">
				      <template slot-scope="scope">
				      	<!-- 弹窗 --> 
						<el-popover  ref="popover" placement="left" width="600" trigger="click" class="demo-input-suffix">
						 <el-form :inline="false" :model="wareHouseVO2" label-width="80px"  ref="wareHouseVO2" label-position="right" size="small" :rules="rules">
							<el-form-item label="商品编码" prop="goodsBarCode">
								<el-col :span="15">
		  							<el-input placeholder="请输入商品编码" v-model="scope.row.goodsBarCode"></el-input>
		  						</el-col>
							</el-form-item>
							<el-form-item label="库位" prop="locationName" >
								<el-col :span="15">
		  							<el-input placeholder="请输入库位" v-model="scope.row.locationName"></el-input>
		  						</el-col>
							</el-form-item>
							<el-form-item label="商品类型" prop="goodsType">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品类型" v-model="scope.row.goodsType"></el-input>
			  					</el-col>
							</el-form-item>
							<el-form-item label="商品单位" prop="goodsUnit">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品单位" v-model="scope.row.goodsUnit"></el-input>
			  					</el-col>
							</el-form-item>
							<el-form-item label="商品价格" prop="goodsPrice">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品价格" v-model="scope.row.goodsPrice"></el-input>
			  					</el-col>
							</el-form-item>
							<el-form-item label="商品描述" prop="goodsDesc">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品描述" v-model="scope.row.goodsDesc"></el-input>
			  					</el-col>
							</el-form-item>
							<el-form-item label="商品名称" prop="goodsName">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品名称" v-model="scope.row.goodsName"></el-input>
			  					</el-col>
							</el-form-item>
		  				</el-form>
		  				<span class="dialog-footer">
							    <el-button size="mini" type="primary" @click="updateForm('wareHouseVO2',scope.row)">确定</el-button>
							    <el-button size="mini" type="primary" @click="closePopper()">取消</el-button>
							</span>
						</el-popover>
				      	
				      </template>
				    </el-table-column>
			    
			  </el-table>
			</template>		
			
			<div class="pageContent">		
				<el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="currentPage"
			      :page-sizes="[5, 10]"
			      :page-size="pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="totalSize">
			    </el-pagination>
			</div>
		<!-- table end -->
	</div>
</body>
<script type="text/javascript" th:src="@{js/order/outorder.js}"></script>
</html>